<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对话记录</title>
</head>
<body>

<th:block th:fragment="conversation">
    <!-- 主容器 -->
    <div class="conversation_app" id="conversation_app" v-cloak>
        <!--  列表主内容-->
        <div class="conversation-main-content" :class="{ 'with-detail': showDetail }">
            <!-- 整体布局：搜索模块 + 列表 -->
            <div class="search-header">
                <!-- 搜索筛选区域 -->
                <div class="search-filter">
                    <!-- 关键词搜索 -->
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <el-input placeholder="搜索对话内容" v-model="searchStr"
                                  @keyup.enter.native="handleSearch"></el-input>
                    </div>

                    <!-- 机器人筛选 -->
                    <el-select v-model="selectedRobot" placeholder="全部机器人">
                        <el-option label="全部机器人" value=""></el-option>
                        <el-option v-for="robot in agentList" :label="robot.agentName" :value="robot.id"></el-option>
                    </el-select>

                    <!-- 类型筛选下拉框 -->
                    <el-select v-model="selectedType" placeholder="全部类型" clearable>
                        <el-option label="全部类型" value=""></el-option>
                        <el-option label="web" value="web"></el-option>
                        <el-option label="API" value="api"></el-option>
                        <el-option label="platform" value="platform"></el-option>
                    </el-select>

                    <!-- 日期范围 -->
                    <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <!-- 会话信息搜索 -->
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <el-input placeholder="搜索会话信息" v-model="sessionStr"
                                  @keyup.enter.native="handleSearch"></el-input>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                        <el-button type="danger" :disabled="!selectedConversations.length" @click="batchDelete">
                            批量删除
                        </el-button>
                    </div>
                </div>
            </div>
            <!-- 对话记录表格 -->
            <div class="conversation-table">
                <el-table
                        :data="recordList"
                        @selection-change="handleSelectionChange"
                        stripe border>

                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="sessionId" label="会话ID" width="500"></el-table-column>
                    <el-table-column prop="agentName" label="机器人" width="300"></el-table-column>
                    <el-table-column prop="source" label="类型" width="80"></el-table-column>
                    <el-table-column prop="firstCompletion" label="首条消息" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div class="text-ellipsis">{{ scope.row.firstCompletion }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="recordCount" label="条数" width="80"></el-table-column>

                    <el-table-column prop="updateTime" label="最近对话时间" width="180"></el-table-column>

                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click.stop="showConversationDetail(scope.row)">查看</el-button>
                            <el-button type="text" class="delete-btn" @click.stop="deleteConversation(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页控件 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.current"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

        </div>

        <!-- 新增遮罩层 -->
        <div class="overlay-mask"
             :class="{ 'active': showDetail }"
             @click="closeDetail"></div>


        <!-- 右侧抽屉（聊天记录窗口） -->
        <div class="chat-detail-drawer" :class="{ 'active': showDetail }">
            <th:block th:replace="~{fragments/dashboard/conversation-detail::conversation-detail}"></th:block>
        </div>
    </div>

    <link rel="stylesheet" href="/css/conversation.css">
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/dayjs/1.8.15/dayjs.min.js"></script>
</th:block>

</body>
</html>